{% extends 'base.html' %}

{% block title %}模型测试{% endblock %}

{% block body %}
    <div class="container mt-5">
        <h2 class="text-center mb-4">模型测试</h2>

        <div class="model-form">
            <div class="form-group">
                <label for="modelSelect">选择模型:</label>
                <select class="form-control" id="modelSelect" onchange="toggleInput()">
                    <option value="dlut_emotion_dict">大连理工情感字典</option>
                    <option value="bert_cold_model" selected>bert_cold_model</option>
                    <option value="bert_sarcasm_model">bert_sarcasm_model</option>
                </select>
            </div>

            <div class="form-group">
                <label for="textInput">输入文本:</label>
                <input type="text" class="form-control" id="textInput" placeholder="请输入文本">
                <label for="topicInput" id="topicLabel" style="display:none;">输入标题:</label>
                <input type="text" class="form-control" id="topicInput" placeholder="请输入标题" style="display:none;">
            </div>

            <button type="button" class="btn btn-primary btn-lg btn-block" onclick="callBackend()">提交</button>
        </div>

        <div class="result-container mt-4">
            <h3 class="text-center">结果:</h3>
            <div id="resultDisplay" class="result-placeholder text-center">等待结果...</div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        function toggleInput() {
            var modelSelect = document.getElementById("modelSelect");
            var topicLabel = document.getElementById("topicLabel");
            var topicInput = document.getElementById("topicInput");

            if (modelSelect.value === "bert_sarcasm_model") {
                topicLabel.style.display = "inline-block";
                topicInput.style.display = "inline-block";
            } else {
                topicLabel.style.display = "none";
                topicInput.style.display = "none";
            }
        }

        function callBackend() {
            const resultDisplay = document.getElementById('resultDisplay');
            resultDisplay.innerHTML = '<div class="loading-spinner"></div>';

            const model = document.getElementById('modelSelect').value;
            const textInput = document.getElementById('textInput').value;
            const topicInput = document.getElementById('topicInput').value;

            // 发送Ajax请求
            $.ajax({
                url: '/model_use/test',
                type: 'POST',
                data: {model: model, text: textInput, topic: topicInput},
                success: function (response) {
                    // 解析 JSON 数据
                    {#const data = JSON.parse(response);#}
                    // 获取 result 字段的值
                    const result = response.result;
                    console.log(result)
                    // 根据 result 的值更新页面内容
                    if (result === 0) {
                        document.getElementById('resultDisplay').innerHTML = '未涉及网暴';
                    } else {
                        document.getElementById('resultDisplay').innerHTML = '涉及网暴';
                    }
                }
            });
        }
    </script>
{% endblock %}
